{% extends 'center_base.html' %}
{% load staticfiles %}

{% block pagetitle %}
    <title>
        Vshare | 发表博客
    </title>
{% endblock %}
{% block nav_title %}
    {{ user_.account }} | 的博客
{% endblock %}

{% block css_ %}
    <style>
        #title{
            border: solid deepskyblue 2px;
            border-radius: 3px;
        }
        .col-md-10{
            border-radius: 10px;
            border: 3px solid black;
            min-height: 400px;
            padding: 40px 50px;
        }
        .select {
            height: 30px;
            border: solid deepskyblue 1px;
            border-radius: 3px;
            font-size: 18px;
        }
        h2{
            display: inline-block;
        }
        #content{
            min-height: 400px;
            width: 100%;
            max-width: 100%;
            border-radius: 5px;
            border: solid limegreen 2px;
            font-size: 22px;
        }
        .form-group{
            margin: 30px auto;
        }
        .not-valid{
            color: red;
        }
    </style>
{% endblock %}

{% block lefter %}
<div class="col-md-12">
<form action="/user_/write_article" method="post" id="my_form">
{##}
    {% csrf_token %}
    <input type="hidden" name="user_id" value="{{ user_.id }}">
    <input type="hidden" name="a_id" value="{{ article.id }}">
    <h2>【标题】：
        <input value="{{ article.title }}" type="text" name="title" id="title" placeholder="文章的标题">
        <span id="empty_title" class="not-valid"></span>
    </h2>
    <br>
    <h2>
        <span>【分类】：给文章选择一个分类</span>
    </h2>
    <span>
        <select name="my_category" class="select" id="my_category">
            <option value="0">---暂未选择---</option>
            {% for cat in u_cats %}
            <option value="{{ cat.id }}">{{ cat.category }}</option>
            {% endfor %}

        </select>
    </span>
    <span id="empty_cat" class="not-valid"></span>
    <br>
    <h2>
        <span>【标签】：给文章选择一个标签</span>
    </h2>
    <span>
        <select name="my_tag" class="select" id="my_tag">
            <option value="0">---暂未选择---</option>
            {% for tag in u_tags %}
            <option value="{{ tag.id }}">{{ tag.tag }}</option>
            {% endfor %}

        </select>
    </span>

    <br><br>
    <h2>
        <span>【正文】目前仅支持
            <a target="_blank" href="https://baike.baidu.com/item/markdown/3245829">
                markdown
            </a>
            富文本语法，敬请见谅！
        </span>
    </h2>
    <br>
    <span id="empty_cont" class="not-valid"></span>
    <textarea type="text" name="content" id="content">
        {{ article.content }}
    </textarea>

{##}



{#<div class="form-group col-md-12">#}
{#    <label class="control-label col-md-12">文章编辑器:</label>#}
{#    <div class="col-md-12" >#}
{#        <script id="container" name="content" type="text/platin" >#}
{#        </script>#}
{#    </div>#}
{#</div>#}
{#<div class="edit-area">#}
{#{{ form }}#}
{#</div>#}
 <br><br><br>
{#    --提交和重置--#}
    <div class="form-group">
        <input class="btn btn-default" name="reset" type="reset" id="reset" tabindex="6" value="重写"/>
        <input class="btn btn-default" onclick="submitfunction(this)" name="mysubmit" type="button" id="mysubmit" tabindex="5" value="发表"/>
    </div>
{#{{ form.media }}#}

</form>
</div>
{% endblock %}

{% block footer_js %}
    <script>
        function submitfunction(event) {
{#        --------表单数据合法性判断-------#}
        var title = $('#title').val();
        var cat = $('#my_category').val();
        var tag = $('#my_tag').val();
        var cont = $('#content').val();
        console.log(title, cat, tag, cont);
        if(!title){
            $('#empty_title').text('标题不能空着');
            }
        else if(title.length > 20){
            $('#empty_title').text('标题长度限制(1~20)');
            }
        else if(cat<1){
            $('#empty_cat').text('请选择一个分类');
        }
        else if(tag<1){
            $('#empty_tag').text('请选择一个标签');
        }
        else if (cont.length >= 1) {
            $('#my_form').submit();
        } else {
            $('#empty_cont').text('内容不能为空');
        }
{#        $('#submit')提交#}
        }
    </script>

{#<script src="{% static '/ueditor/static/ueditor/ueditor.config.js' %}" type="text/javascript"></script>#}
{##}
{#<script src="{% static '/ueditor/static/ueditor/ueditor.all.js' %}" type="text/javascript"></script>#}
{##}
{#<script type="text/javascript">#}
{#        var ue = UE.getEditor('container',{#}
{#            serverUrl: "/ueditor/"#}
{#        });#}
{# </script>#}

{% endblock %}















